<style lang="scss" scoped>
    .vTable {
        min-height: 50px;
    }
</style>
<template>
    <div class="vTable" v-loading="loading">
        <slot v-if="vData" :vdata="vData"></slot>
    </div>
</template>
<script>
    export default {
        name: 'ui-bigDataTable',
        props: {
            tableData: {
                type: [Object, Array],
                required: true
            }
        },
        data() {
            return {
                loading: true,
                vData: null,
                tableDom: this.$parent.$slots.default[0],
                scrollDom: null,
                trHeight: null,
                isEnd: false
            }
        },
        watch: {
            tableData: {
                handler(v, o) {
                    // console.log(data.length)
                    this.init()
                },
                deep: true,
                immediate: true
            }
        },
        created() {
        },
        mounted() {

        },
        methods: {
            init() {
                if (this.tableData && this.tableData.length > 0) {

                    // 先插入一条数据来获取当前tr的高度
                    this.vData = []
                    this.vData.push(this.tableData[0])

                    // 只有5条数据的时候不需要懒加载
                    // console.log('tableData.length:', this.tableData.length)
                    if (this.tableData.length <= 5) {
                        // console.log('小于5条数据')
                        for (let i = 1, len = this.tableData.length; i < len; i++) {
                            this.vData.push(this.tableData[i])
                        }
                        this.loading = false
                        return false
                    }

                    // 大于5条数据
                    // console.log('大于5条数据')
                    this.$nextTick(() => {

                        console.log(this.tableDom)
                        this.scrollDom = this.tableDom.elm.querySelector('.el-table__body-wrapper')
                        this.trHeight = this.scrollDom.querySelector('tr').scrollHeight

                        // 获取容器高度后决定要拉取多少条第一批数据
                        setTimeout(() => {

                            let num = Math.ceil(this.scrollDom.clientHeight / this.trHeight)

                            console.log(this.tableData.length)
                            // 当表格的数据条数少于需要计算后加载条数就以最少的为准
                            if (this.tableData.length < num) {
                                num = this.tableData.length
                            }

                            // 插入数据并开始监听
                            for (let i = 1; i < num + 2; i++) {
                                this.vData.push(this.tableData[i])
                            }
                            this.scrollDom.addEventListener('scroll', this.addData, false);
                        })

                        this.loading = false

                    })

                }

            },
            addData(e) {
                // 当加载完毕后就再也不用加载了
                if (this.isEnd) return false

                // 滚动到底部后加载新的数据
                if ((e.target.scrollTop + this.scrollDom.clientHeight + 10) >= this.scrollDom.scrollHeight) {
                    console.log('gogogo')
                    console.log(this.vData.length)

                    if (this.vData.length < this.tableData.length) {
                        // 每次加载3条数据
                        for (let i = 0; i < 3; i++) {
                            this.vData.push(this.tableData[this.vData.length])
                            if (this.vData.length === this.tableData.length) {
                                // 告诉大家我已经到底了
                                this.isEnd = true
                                break
                            }
                        }
                    }
                }
            }
        },
        destroyed() {
            this.scrollDom.removeEventListener('scroll', this.addData, false);
        }
    }
</script>
